<html lang="zh-CN" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <title>破烂王后台登录</title>
    <link href="/assets/login/css/app.31d95eba.css" rel="stylesheet">
    <link href="/assets/login/css/chunk-2b82f2e7.d5b819d1.css" rel="stylesheet">
    <link href="/assets/login/css/login.css" rel="stylesheet">
    <link href="/assets/css/sweetalert.css" rel="stylesheet">
    <link rel="stylesheet" href="/assets/element-ui-2.15.14/css/index.css">
</head>

<body class="dark-layout">
<div id="app" class="h-100">
    <div>
        <div class="auth-wrapper auth-v2">
            <div class="row auth-inner m-0">
                <!--                <a href="javascript:void(0);" target="_self" class="brand-logo">-->
                <!--                    <img src="">-->
                <!--                </a>-->
                <div class="d-none d-lg-flex align-items-center p-5 col-lg-8">
                    <div class="w-100 d-lg-flex align-items-center justify-content-center px-5">
                        <!-- <img src="/assets/img/login-bg.jpg" alt="登录中心" class="img-fluid"> -->
                        <img src="/assets/login/images/main.svg" alt="登录中心" class="img-fluid">
                    </div>
                </div>
                <div class="d-flex align-items-center auth-bg px-2 p-lg-5 col-lg-4">
                    <div class="px-xl-2 mx-auto col-sm-8 col-md-6 col-lg-12">
                        <h2 class="card-title mb-1 font-weight-bold">👋Hi,欢迎来到破烂王后台登录中心！🎉</h2>
                            <p class="card-text mb-2"><span style="font-size: 2rem;">👨🏻‍💻👩🏻‍💻</span>请登录您的帐户并开始工作吧</p>
                        {:token()}
                        <span>
                            <div role="group" class="form-group" id="__BVID__50">
                                    <label for="login-email" class="d-block" id="__BVID__50__BV_label_">用户名</label>
                                    <div>
                                        <span>
                                            <input id="login-email" v-model="formData.username" type="text"
                                                   placeholder="请您输入用户名" class="form-control">
                                            <small class="text-danger"></small>
                                        </span>
                                    </div>
                                </div>
                            <fieldset class="form-group" id="__BVID__53">
                                <div>
                                    <div class="d-flex justify-content-between">
                                        <label for="login-password">密码</label>
                                        <a @click="handelResetPassword" href="javascript:void(0);"><small>忘记密码？</small></a>
                                    </div>
                                    <span>
                                        <div role="group" class="input-group input-group-merge">
                                            <input id="login-password" name="login-password" type="password"
                                                   placeholder="请您输入密码" v-model="formData.password" class="form-control-merge form-control">
                                        </div>
                                        <small class="text-danger"></small>
                                    </span>
                                </div>
                            </fieldset>
                            <fieldset class="form-group" id="__BVID__58">
                                <div>
                                    <div class="custom-control custom-checkbox">
                                        <input id="keeplogin" type="checkbox" name="keeplogin"
                                               class="custom-control-input" checked value="1">
                                        <label for="keeplogin" class="custom-control-label"> ✍️保持会话(勾选后24小时内将不用重复登录) </label>
                                    </div>
                                </div>
                            </fieldset>
                            <button type="button" @click="handleLoginAdmin" class="btn btn-primary btn-block">🚀 登 录 后 台</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/assets/js/jquery-2.1.1.min.js"></script>
<script src="/assets/element-ui-2.15.14/js/vue.js"></script>
<script src="/assets/element-ui-2.15.14/js/index.js"></script>
<script src="/assets/js/sweetalert.min.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            formData: {
                username: '',
                password: ''
            },
            loginLoading: ''
        },
        created() {

        },
        methods: {
            // 忘记密码
            handelResetPassword() {
                this._sweetMsg({
                    type: 'info',
                    title: '请您联系开发人员重新设置密码!!!'
                });
            },
            // 登录后台
            handleLoginAdmin() {
                let formData = this.formData;

                if (formData.username === '') {
                    this._sweetMsg({
                        type: 'warning',
                        title: '请您输入用户名'
                    });
                    return false;
                }
                if (formData.password === '') {
                    this._sweetMsg({
                        type: 'warning',
                        title: '请您输入密码'
                    });
                    return false;
                }

                $.ajax({
                    type: 'POST',
                    url: '{:url("login")}',
                    data: {
                        username: formData.username,
                        password: formData.password,
                        '__token__': $('input[name="__token__"]').val(),
                        keeplogin: $("input[type='checkbox']").prop("checked") ? 1 : 0
                    },
                    beforeSend: () => {
                        this.loginLoading = this.$loading({
                            lock: true,
                            text: '正在登录中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.3)'
                        });
                    },
                    success: res => {
                        this.loginLoading.close();
                        if (res.code === 0) {
                            this._sweetMsg({
                                type: 'error',
                                title: res.msg
                            });
                            return false;
                        } else {
                            this._sweetMsg({
                                type: 'success',
                                title: res.msg
                            });

                            $('.sa-button-container button.confirm').click(() => {
                                window.location.href = res.url;
                            });

                            setTimeout(() => {
                                window.location.href = res.url;
                            }, 2500);
                        }
                    }
                });
            },
            // 弹窗提示框
            _sweetMsg(obj) {
                swal({
                    title: obj.title || '',
                    text: obj.content || '温馨提示',
                    type: obj.type || 'success',
                    confirmButtonColor: "#7367f0",
                    confirmButtonText: '确定'
                });
            },
            // 询问框
            _sweetConfirm(obj, confirmCallBack = () => {}, cancelCallBck = () => {}) {
                swal({
                    title: obj.title,
                    text: obj.content || '温馨提示',
                    type: 'info',
                    showCancelButton: true,
                    confirmButtonColor: '#7367f0',
                    confirmButtonText: '',
                    cancelButtonText: '取消',
                    closeOnConfirm: false
                }, function (confirm) {
                    if (confirm) {
                        confirmCallBack();
                    } else {
                        cancelCallBck();
                    }
                });
            }
        }
    });
</script>
</body>

</html>